<template>
  <div class="contract-sign-success">
    <img class="logo" src="@/assets/img/sign-success.png" alt="" />
    <span class="title">签署成功</span>
    <div class="schedule">
      签署完成进度: <span>({{ progressFraction }})</span>
    </div>
    <van-button class="btn" type="primary" block @click="returnHome"
      >返回至首页</van-button
    >
    <van-button
      class="btn sizi-color"
      type="default"
      block
      @click="LookcontractFileClick"
      >查看文件详情</van-button
    >
    <span class="describe">文件签署完成后，请前往文件详情或电脑端下载文件</span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getSigningCompletion } from '@/api/contract'
export default defineComponent({
  setup() {
    const route = useRoute()
    const router = useRouter()
    const contractId = ref('')
    const progressFraction = ref('')
    contractId.value = route.query.contractId as any
    const changeSignCompletion = async () => {
      const params = {
        contractId: contractId.value
      }
      const res = await getSigningCompletion(params)
      if (res.code !== '0') return
      progressFraction.value = res.data.progressFraction
    }
    changeSignCompletion()

    // 返回首页
    const returnHome = () => {
      router.push('/home')
    }

    // 查看合同文件详情
    const LookcontractFileClick = () => {
      router.push({
        path: 'contract-file-details',
        query: {
          contractId: contractId.value
        }
      })
    }
    return { progressFraction, returnHome, LookcontractFileClick }
  }
})
</script>

<style scoped lang="less">
.contract-sign-success {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 104px 20px;
  .logo {
    height: 75px;
    width: 75px;
    padding-bottom: 20px;
  }
  .title {
    font-size: 20px;
    color: #101010;
  }
  .schedule {
    padding: 12px 0;
    font-size: 14px;
    color: #666;
    span {
      padding-left: 8px;
    }
  }
  .btn {
    height: 48px;
    margin-bottom: 12px;
    font-size: 16px;
  }
  .sizi-color {
    color: #666;
  }
  .describe {
    font-size: 12px;
    color: #999;
  }
}
</style>
